<template>
  <div class="box">
    <div>
      <div><img src="../../../assets/img/chart1.png" /></div>
      <div><img src="../../../assets/img/chart1.png" /></div>
      <div><img src="../../../assets/img/chart1.png" /></div>
    </div>
    <div>
      <div>
        <p>{{ (jrxjcd/1000).toFixed(2) }}</p>
        <p>今日巡检长度(Km)</p>
      </div>
      <div>
        <p>{{ wcxjjh }}</p>
        <p>完成巡检计划</p>
      </div>
      <div>
        <p>{{ fxyh }}</p>
        <p>发现隐患(个)</p>
      </div>
    </div>
    <div>
      <div><img src="../../../assets/img/chart1.png" /></div>
      <div><img src="../../../assets/img/chart1.png" /></div>
      <div><img src="../../../assets/img/chart1.png" /></div>
    </div>
    <div>
      <div>
        <p>{{ xjd }}</p>
        <p>巡检点（个）</p>
      </div>
      <div>
        <p>{{ jrxjrc }}</p>
        <p>今日巡检人数</p>
      </div>
      <div>
        <p>{{ clyh }}</p>
        <p>处理隐患(个)</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import DashboardAPI from "@/api/DashboardAPI";
import moment from "moment";
const jrxjcd = ref(0);
const xjd = ref(0);
const wcxjjh = ref(0);
const jrxjrc = ref(0);
const fxyh = ref(0);
const clyh = ref(0);

// 今日巡检情况
function f_QueryInsp() {
  let params = {
    StartTime: moment(new Date()).format("yyyy-MM-DD 00:00:00"),
    EndTime: moment(new Date()).format("yyyy-MM-DD 23:59:59"),
    Status: null,
    InspUserId: "",
  };
  DashboardAPI.api_today_insp_user_count(params).then(({ data }) => {
    jrxjcd.value = data.inspLineLength;
    xjd.value = data.inspPositionCount;
    wcxjjh.value = data.completeInspTotal;
    jrxjrc.value = data.inspUserTotal;
    fxyh.value = data.dangerTotal;
    clyh.value = data.handleDangerTotal;
  });
}

onMounted(() => {
  f_QueryInsp();
});
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  background: transparent;

  > div:first-child,
  > div:first-child + div + div {
    flex: 1;
    // display: flex;
    // justify-content: center;
  }

  > div:first-child + div,
  > div:first-child + div + div + div {
    flex: 2;
    padding-top: 2vh;
  }

  > div {
    > div {
      height: 7vh;

      img {
        position: relative;
        top: 50%;
        width: 100%;
        height: auto;
        transform: translateY(-50%);
      }

      p {
        height: 2vh;
        margin: 0;
        line-height: 2vh;
        text-align: center;
      }

      > p:first-child {
        font-family: YouSheBiaoTiHei, sans-serif;
        font-size: 1.8vh;
        color: #fcd966;
      }

      > p:last-child {
        font-size: 1vh;
      }
    }
  }
}

.star {
  padding: 1vh;

  > div {
    margin-bottom: 0.5vh;
    font-size: 1vh;
    color: #c2e0ffa4;

    span {
      display: inline-block;
      width: 1.2vh;
      height: 1.2vh;
      margin-right: 0.6vh;
      line-height: 1.2vh;
      vertical-align: sub;
      background: #fff;
      border-radius: 50%;
    }

    span.color1 {
      background: #0f8;
    }

    span.color2 {
      background: #a2e7b7;
    }

    span.color3 {
      background: #fcd966;
    }

    span.color4 {
      background: #ee6868;
    }
  }
}
</style>
